/*
 * @Author: 涵崽
 * @Date: 2023-11-10 10:56:11
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2023-11-10 15:41:53
 * @Description: 回到顶部
 * 可选指定元素，如果不指定则全局页面回到顶部。可选在元素偏移多少 px 后显示 backtop 元素，例如在滚动 400px 后显示回到顶部按钮。
 * 
 * 使用方法
 * 然后你可以在模板中任何元素上使用新的 v-backtopproperty，如下表示当前页面向下滚动 400px 后显示所绑定该指令的元素：
 * <div v-backtop="400"> 回到顶部 </div>
 * 可以这样使用，默认当前页面向下滚动200px 时 显示所绑定该指令的元素：
 *  <div v-backtop> 回到顶部 </div>

 */

export default {
  bind(el, binding) {
    // 监听当前窗口的滚动距离

    binding.value = binding.value || 200;
    window.addEventListener("scroll", function () {
      let scrollDistance =
        window.pageYOffset || document.documentElement.scrollTop;
      // 如果滚动距离大于设置的距离 显示该元素
      if (scrollDistance >= binding.value) {
        el.style.visibility = "unset";
      } else {
        // 否则隐藏该元素 并 占位
        el.style.visibility = "hidden";
      }
    });
    // 响应点击后滚动到元素顶部
    el.addEventListener("click", () => {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    });
  },

  unbind(el) {
    window.removeEventListener("scroll");
    el.removeEventListener("click");
  },
};
